<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="true"
		:auto="false" :hideEmptyView="false">
		<view slot="top">
			<z-nav-bar backState="1000">积分订单列表</z-nav-bar>
			<view class="bg-white">
				<u-tabs :list="tabs" :current="current" :scrollable="false" lineColor="#FFB143" :activeStyle="{color: '#FFB143'}" @change="handleTabChange"></u-tabs>
			</view>
		</view>
		
		<view v-for="(item, index) in dataList" :key="index" class="bg-white u-p-20 u-m-b-30 " @click.stop="handleNavDetail(item)">
			<view v-for="(detail,index1) in item.details" :key="index1">
				<view class="u-flex " >
					<view class="u-flex-3">
						<image :src="detail.coverImage" style="width: 200rpx; height: 200rpx; border-radius: 20rpx;"></image>
					</view>
					<view class="u-flex-9 u-m-l-20">
						<view class="u-flex">
							<view class="u-flex-9">
								<view class="u-line-1 u-font-26 text-bold">{{detail.spuTitle}}</view>
							</view>
							<view class="u-flex-3 u-flex u-flex-end">
								<view style="opacity: 0.5;" class="u-font-22">
									<text>{{detail.point}}</text>
									<!-- <text>积分</text> -->
								</view>
							</view>
						</view>
						
						<view class="u-flex">
							<view class="u-flex-10 " style="opacity: 0.5;">
								<view class=" u-font-26 u-m-t-10 u-flex u-flex-wrap">
									<text>数量</text>
									<text class="u-m-l-10">×</text>
									<text>{{item.buyCount}}</text>
								</view>
							</view>
						</view>
						
						<view class="u-flex">
							<view class="u-flex-8">
								<view class="u-line-1 u-font-22 u-m-t-10" style="opacity: 0.5;">
									<text>订单号:</text>
									<text>{{item.id}}</text>
								</view>
							</view>
							<view class="u-flex-4 u-flex u-flex-end">
								<view class="u-m-t-10">
									<view>
										<text class="u-font-22 u-m-r-10" v-if="item.orderStatus == orderStatusEnum.pending">应付款</text>
										<text class="u-font-22 u-m-r-10" v-else-if="item.orderStatus == orderStatusEnum.canceled">应付款</text>
										<text class="u-font-22 u-m-r-10" v-else-if="item.orderStatus == orderStatusEnum.refund">应付款</text>
										<text class="u-font-22 u-m-r-10" v-else-if="item.orderStatus == orderStatusEnum.return">应付款</text>
										<text class="u-font-22 u-m-r-10" v-else>实付</text>
										<text class="text-red">{{item.payPoint}}</text>
										<!-- <text class="u-font-20 text-red">积分</text> -->
									</view>
								</view>
							</view>
						</view>
						
						<view class="u-flex u-m-t-10">
							<view class="u-flex-12 u-flex">
								<view>
									<view v-if="item.orderStatus == orderStatusEnum.pending">
										<u-tag text="待支付" plain size="mini" type="warning" shape="circle" ></u-tag>
									</view>
									<view class="u-flex" v-else-if="item.orderStatus == orderStatusEnum.canceled">
										<view class="u-m-r-10">
											<u-tag text="交易失败" plain size="mini" type="info" shape="circle"></u-tag>
										</view>
										<u-tag text="已取消" plain size="mini" type="info" shape="circle" ></u-tag>
									</view>
									<view class="u-flex" v-else-if="item.orderStatus == orderStatusEnum.refund">
										<view class="u-m-r-10">
											<u-tag text="交易失败" plain size="mini" type="info" shape="circle"></u-tag>
										</view>
										<u-tag text="已退款" plain size="mini" type="info" shape="circle" ></u-tag>
									</view>
									<view class="u-flex" v-else-if="item.orderStatus == orderStatusEnum.return">
										<view class="u-m-r-10">
											<u-tag text="交易失败" plain size="mini" type="info" shape="circle"></u-tag>
										</view>
										<u-tag text="已退货" plain size="mini" type="info" shape="circle" ></u-tag>
									</view>
									<view v-else class="u-flex">
										<view class="u-m-r-10">
											<u-tag text="交易成功" plain size="mini" type="error" shape="circle"></u-tag>
										</view>
										<u-tag text="待发货" plain size="mini" type="warning" shape="circle" v-if="item.orderStatus == orderStatusEnum.processed"></u-tag>
										<u-tag text="待收货" plain size="mini" type="warning" shape="circle" v-else-if="item.orderStatus == orderStatusEnum.shipped"></u-tag>
										<u-tag text="待评价" plain size="mini" type="warning" shape="circle" v-else-if="item.orderStatus == orderStatusEnum.complete"></u-tag>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="u-flex u-m-t-10">
					<view class="u-flex-7 u-font-22" style="opacity: 0.5;">
						<text>下单时间:</text>
						<text class="u-m-l-10">{{item.createTime}}</text>
					</view>
					<view class="u-flex-5 u-flex u-flex-end" >
						
						<!-- <view v-if="item.orderStatus == orderStatusEnum.pending" @click.stop="handleOrderCancel(item)">
							<u-button shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'160rpx', 'fontSize':'28rpx', 'margin-right':'10rpx'}">取消订单</u-button>
						</view> -->
						
						<!-- <view v-if="item.orderStatus == orderStatusEnum.pending" @click.stop="handleNavDetail(item)">
							<u-button shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'160rpx', 'fontSize':'28rpx'}">去支付</u-button>
						</view> -->
						
						
						<view v-if="item.orderStatus == orderStatusEnum.processed" @click.stop="handleSend">
							<u-button shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'160rpx', 'fontSize':'28rpx'}">催催TA</u-button>
						</view>
						<view v-if="item.orderStatus == orderStatusEnum.shipped" @click.stop="handleOrderSignFor(item)">
							<u-button shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'160rpx', 'fontSize':'28rpx'}">确认签收</u-button>
						</view>
						<!-- <view v-if="item.orderStatus == orderStatusEnum.complete" @click.stop="handleOrderComment(item)">
							<u-button shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'160rpx', 'fontSize':'28rpx'}">评价</u-button>
						</view> -->
					</view>
				</view>
				
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {getPointOrderPage, orderSignFor} from '@/api/point.js'
	import {jumpTypeEnum, orderStatusEnum} from '@/common/const.js'
		
	export default{
		data(){
			return{
				orderStatusEnum,
				dataList:[],
				requestParams:{},
				tabs: [{
						name: '全部',
				}, {
						name: '待发货',
				}, {
						name: '待收货'
				}, {
						name: '已完成'
				}],
				
				current:0,
			}
		},
		onLoad() {
			this.init()
		},
		watch:{
			current(val){
				switch(val){
					case 0:
						// 全部
						this.requestParams.orderStatus = ''
						break;
					case 1:
						// 待发货
						this.requestParams.orderStatus = orderStatusEnum.processed
						break;
					case 2:
						// 待收货
						this.requestParams.orderStatus = orderStatusEnum.shipped
						break;
					case 3:
						// 待评价
						this.requestParams.orderStatus = orderStatusEnum.complete
						break;
				}
				this.reload()
			}
		},
		methods:{
			
			/**
			 * 初始化
			 */
			init(){
				this.reload()
			},
			
			/**
			 * 列表重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			/**
			 * 查询列表
			 */
			queryList(pageNo, pageSize){
				this.requestParams.current = pageNo
				this.requestParams.size = pageSize
				getPointOrderPage(this.requestParams).then(res=>{
					if(pageNo == 1){
						this.dataList = []
					}
					let data = res.data.records
					data.forEach(item=>{
						item.details.forEach(detail=>{							
							// 获取sku封面
							let images = detail.bannerImages.split(',')
							if(!detail.hasOwnProperty('coverImage')){
								this.$set(detail, 'coverImage', images[0])
							} else {
								detail.coverImage = images[0]
							}
						})
					})
					
					this.dataList = this.dataList.concat(data);
					this.$refs.paging.complete(data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			
			/**
			 * 跳转详情
			 */
			handleNavDetail(item){
				let orderId = item.id
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/points_order/detail?orderId=${orderId}`, true)
			},
			
			/**
			 * 切换订单状态
			 */
			handleTabChange(e){
				this.current = e.index
			},
			
			/**
			 * 催发货
			 */
			handleSend(){
				uni.showLoading({
					title:'发送中'
				})
				setTimeout(()=>{
					uni.hideLoading()
					this.$u.toast('已发送催货通知')
				},1000)
			},
			
			/**
			 * 确认签收
			 */
			handleOrderSignFor(item){
				let that = this
				uni.showModal({
					title: '提示操作',
					content: '是否确认签收该商品？',
					success: function (res) {
						if (res.confirm) {
							// 签收
							orderSignFor({
								id: item.id
							}).then(result=>{
								that.$u.toast("签收成功")
								that.reload()
							})
						} else if (res.cancel) {
								//console.log('用户点击取消');
						}
					}
				});
			}
			
		}
	}
</script>

<style>
</style>